<template>
  <div class="home">
    <div class="searchBar" @click="$router.push('/search')">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="listBox">
      <van-card
        v-for="(v,i) in bookList"
        :key="i"
        price="2.00"
        :desc="v.context"
        :title="v.name"
        :thumb="v.image"
		@click="$router.push('/detail/'+v.id)"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      value: null
    };
  },
  computed: {
    ...mapState(["bookList"])
  },
  created() {
    this.$http.get("/api/list").then(data => {
      this.$store.commit("setBookList", data.data);
    });
  }
};
</script>

<style>
</style>